<template>
  <el-icon :size="size" :color="color" :class="svgClass">
    <svg aria-hidden="true">
      <use :xlink:href="symbolId" />
    </svg>
  </el-icon>
</template>

<script setup name="svg-icon">
import { computed } from "vue";
const props = defineProps({
  prefix: {
    type: String,
    default: "icon",
  },
  name: {
    type: String,
    required: true,
  },
  size: {
    type: [String, Number],
    default: "1em",
  },
  width: {
    type: String,
  },
  height: {
    type: String,
  },
  color: {
    type: String,
    default: "var(--el-text-color-primary)",
  },
  svgClass: {
    type: String,
  },
});
const symbolId = computed(() => `#${props.prefix}-${props.name}`);
const width = computed(() => (props.width ? props.width : props.size));
const height = computed(() => (props.height ? props.height : props.size));
</script>

<style scope></style>
